<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <!-- 子组件 -->
    <!-- 
    父组件向子组件传值，通过自定义属性来传值 
    :有冒号 可以读取当前组件中data中的动态数据
    没有冒号的就是一个自定义属性，其值就是一个固定值
    -->
    <Child :title="title" :num="num" username="张三"></Child>
  </div>


  <script src="./js/vue.js"></script>
  <script>

    // 子组件
    const Child = {
      data() { return {} },
      template: '<div>{{ title }} -- {{ num }} -- {{ username }}</div>',
      // 子组件中通过props来得到组件中的自定义属性
      // 方式 数组  不足 没有对于属性类型限制，也不能给默认值  好处：定义简单
      // props: ['title','num']
      // 方式2 对象 好处：可以设置类型可以有默认值可以验证，不足：写的有点复杂
      props: {
        title: {
          type: String,
          required: true
        },
        num: {
          type: Number,
          default: 100
        },
        username: String
      },
      mounted() {
        console.log(typeof this.num)
      }
    }

    // 父组件
    new Vue({
      el: '#root',
      data: {
        title: '今天是周五，明天你们还要自习',
        num: 1000
      },
      // 局部组件
      components: { Child }
    })
  </script>
</body>

</html>